<template>
  <!-- 添加或修改线索管理对话框 -->
  <el-dialog :title="form.id?'编辑活动' : '创建活动'" :visible="visible" width="618px" append-to-body :close-on-click-modal="false" @close="closeDailog">
    <el-form ref="form" class="cus-search-box cus-dialog-form-box" label-width="110px" :model="form" :rules="rules">
      <el-form-item label="活动名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入活动名称" />
      </el-form-item>
      <el-form-item label="渠道来源" prop="channel">
        <el-select v-model="form.channel" filterable placeholder="请选择渠道来源">
          <el-option
            v-for="dict in channelList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="活动简介：" prop="info">
        <el-input v-model="form.info" placeholder="请输入10字符以内：" maxlength="10" />
      </el-form-item>
      <el-form-item label="活动类型：" prop="type">
        <el-select v-model="form.type" filterable placeholder="请选择活动类型">
          <el-option
            v-for="dict in typeList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.type==='1'" label="课程折扣：" prop="discount">
        <el-input v-model="form.discount" placeholder="请输入课程折扣" />
      </el-form-item>
      <el-form-item v-else label="课程代金券：" prop="vouchers">
        <el-input v-model="form.vouchers" placeholder="请输入课程代金券" />
      </el-form-item>
      <el-form-item label="开始时间：" prop="beginTime">
        <el-date-picker
          v-model="form.beginTime"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="结束时间：" prop="endTime">
        <el-date-picker
          v-model="form.endTime"
          type="date"
          placeholder="选择结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cus-reset-btn" @click="closeDailog">取 消</el-button>
      <el-button class="cus-search-btn" type="primary" @click="addActivitie">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addActivitiesApi, editactivitiesDataApi } from '@/api/Activities'
import { Message } from 'element-ui'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      form: {
        name: null, // 名称
        channel: null, // 渠道来源
        type: null, // 渠道类型
        info: null, // 活动简介
        beginTime: null, // 开始时间
        endTime: null, // 结束时间
        discount: null, // 折扣
        vouchers: null// 代金券
      },
      rules: {
        name: [{ required: true, message: '请输入活动名称！', trigger: 'blur' }],
        channel: [{ required: true, message: '请选择渠道来源！', trigger: 'blur' }],
        type: [{ required: true, message: '请选择渠道类型！', trigger: 'blur' }],
        info: [{ required: true, message: '请输入课程价格！', trigger: 'blur' }],
        // beginTime: [{ required: true, message: '请选择开始时间！', trigger: 'blur' }],
        // endTime: [{ required: true, message: '请选择结束时间！', trigger: 'blur' }],
        discount: [{ required: true, message: '请输入课程价格！', trigger: 'blur' }],
        vouchers: [{ required: true, message: '请输入课程代金券！', trigger: 'blur' }]
      },
      // 渠道来源
      channelList: [],
      // 活动类型
      typeList: []
    }
  },
  created() {
  },
  methods: {
    /**
     * 添加活动
     */
    addActivitie() {
      this.$refs.form.validate(async key => {
        if (!key) return
        if (this.form.id) {
          const res = await editactivitiesDataApi(this.form)
          if (res.code === 500) {
            Message.error('编辑失败！')
            return
          }
        } else {
          const res = await addActivitiesApi(this.form)
          if (res.code === 500) {
            Message.error('添加失败！')
            return
          }
        }

        Message.success(this.form.id ? '编辑成功' : '添加成功')
        this.$emit('add')
        this.closeDailog()
      })
    },
    /**
     * 关闭弹窗
     */
    closeDailog() {
      this.$emit('update:visible', false)
      this.$refs.form.resetFields()
      this.form = {
        name: '', // 名称
        channel: '', // 渠道来源
        type: '', // 渠道类型
        info: '', // 活动简介
        beginTime: '', // 开始时间
        endTime: '', // 结束时间
        discount: '', // 折扣
        vouchers: ''// 代金券
      }
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-form-item__label{
    font-weight: 500;
    color: #333!important;
}
::v-deep .el-input-number{
    width: 300px;
}
::v-deep .el-input-number .el-input__inner {
  text-align: left; //位置居左
}
::v-deep .el-dialog__header{
  background: #8DF;
}
::v-deep .el-textarea__inner{
  width: 300px !important;
  height: 120px;
}
::v-deep .el-textarea{
  width: 300px !important;
}
</style>
